<template>
	<navBar></navBar>
	<view class="Title">修改密码</view>
	<view class="Wrapper">
		<view class="list">
			<input
				type="number"
				maxlength="11"
				class="Inputtxt"
				placeholder="请输入手机号码"
				placeholder-class="place" />
		</view>
		<view class="list">
			<input
				type="number"
				maxlength="6"
				class="Inputtxt"
				placeholder="请输入短信验证码"
				placeholder-class="place" />
			<view class="Code">发送验证码</view>
		</view>
		<view class="list">
			<input
				type="number"
				maxlength="16"
				class="Inputtxt"
				placeholder="请输入新密码"
				placeholder-class="place" />
			<view class="iconfont icon-Close size30"></view>
		</view>
		<view class="list">
			<input
				type="number"
				maxlength="16"
				class="Inputtxt"
				placeholder="请再次输入新密码"
				placeholder-class="place" />
			<view class="iconfont icon-Close size30"></view>
		</view>
		<view class="Tips">6-16位字母，数字或符号,至少两种组成</view>
	</view>

	<view class="continue">确 定</view>
	<agreement></agreement>
	<!-- active -->
</template>

<script setup>
	import { ref, computed, watch } from 'vue';
	import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { useMainStore } from '@/stores/index';

	const mainStore = useMainStore();
</script>

<style lang="scss" scoped>
	.Title {
		width: 650rpx;
		color: #333;
		font-size: 40rpx;
		font-weight: 600;
		margin: 50rpx auto 0;
	}
	.Wrapper {
		width: 650rpx;
		margin: 80rpx auto 0;

		.list {
			width: 100%;
			height: 100rpx;
			position: relative;
			margin-top: 30rpx;
			.Inputtxt {
				width: 100%;
				height: 100%;
				border-bottom: 1px solid #eaeaea;
				font-size: 30rpx;
				color: #000;
			}
			.Code {
				width: 170rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f0f0f0;
				color: #333;
				font-size: 24rpx;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				border-radius: 20rpx;
			}
			.iconfont {
				color: #d9d9d9;
				position: absolute;
				right: 10rpx;
				top: 50%;
				padding: 20rpx;
				transform: translateY(-50%);
			}
		}
		.Tips {
			color: #666666;
			font-size: 24rpx;
			margin-top: 20rpx;
			font-weight: 400;
		}
	}
	.continue {
		width: 650rpx;
		height: 80rpx;
		margin: 100rpx auto 24rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #add7ff;
		color: #fff;
		font-size: 34rpx;
		font-weight: 400;
	}
	.active {
		background-color: v-bind('mainStore.color') !important;
	}
</style>
